<template>
  <div class="account-model">
    <div class="btns">
      <el-button @click="loginModalVisiable=true" type="warning">+添加帐号</el-button>
      <el-button @click="changeAdminPassword(userId)" type="primary">修改密码</el-button>
    </div>
    <div class="table-box">
      <el-table :data="accountList" @selection-change="clickRow" highlight-current-row>
        <!-- <el-table-column type="selection" width="55"></el-table-column> -->
        <el-table-column label="用户" prop="real_name">
        </el-table-column>
        <el-table-column label="用户昵称" prop="manager_name">
        </el-table-column>
        <el-table-column label="发布商品数" prop="goods_count"></el-table-column>
        <el-table-column label="订单量" prop="order_count"></el-table-column>
        <el-table-column label="操作" width="140px">
            <template slot-scope="scope">
              <div class="control">
                <a class="btn" @click="changeCurrentPassword(scope.row)">修改密码</a>
                <span class="spacer"></span>
                <a class="btn" @click="delAccount(scope.row)">删除</a>
              </div>
            </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage"
        :page-sizes="pageSizeArray"
        :page-size="10"
        layout="sizes, prev, pager, next"
        :total="total_count">
      </el-pagination>
    </div>
    </div>
    <el-dialog :visible.sync="loginModalVisiable" :before-close="handleClose" width="816px;">
      <div class="modal-container">
        <div class="modal-form">
          <div class="item clearfix">
            <div class="labelName lf">帐号</div>
            <input v-model="newAccout" type="text" class="inputPassword lf">
          </div>
          <div class="item clearfix">
            <div class="labelName lf">密码</div>
            <input v-model="newPassword" type="password" class="inputPassword lf">
          </div>
          <div class="item clearfix">
            <div class="labelName lf">姓名</div>
            <input @keyup.enter="addAccount()" v-model="real_name" type="text" class="inputPassword lf">
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button style="width:150px;" type="primary" @click="addAccount()">确 定</el-button>
        <el-button style="width:150px;" @click="handleClose()">取 消</el-button>
      </span>
    </el-dialog>

    <el-dialog :visible.sync="passwordVisiable" :before-close="handleClose"  width="816px;">
      <div class="modal-container">
        <div class="modal-form">
          <div class="item clearfix">
            <div class="labelName lf">原密码</div>
            <input v-model="oldPassword" type="password" class="inputPassword lf">
          </div>
          <div class="item clearfix">
            <div class="labelName lf">新密码</div>
            <input v-model="password" type="password" class="inputPassword lf">
            <div class="tips lf">密码不能小于6位数</div>
          </div>
          <div class="item clearfix">
            <div class="labelName lf">确定新密码</div>
            <input v-model="confirmPassword" type="password" class="inputPassword lf">
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button style="width:150px;" type="primary" @click="changePassword()">确 定</el-button>
        <el-button style="width:150px;" @click="handleClose()">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: "accout",
  methods: {
    changeCurrentPassword(row) {
      console.log(row);
      this.currentAccoutId = row.manager_id;
      this.passwordVisiable = true;
    },
    changeAdminPassword(userId) {
      this.currentAccoutId = userId;
      this.passwordVisiable = true;
    },
    handleCurrentChange(page) {
      this.currentPage = page;
      this.getAccountList();
    },
    //分页 每页条数切换
    handleSizeChange(data) {
        this.per_page = data;
        this.getAccountList();
    },

    handleClose() {
      this.real_name = "";
      this.newAccout = "";
      this.newPassword = "";
      this.oldPassword = "";
      this.confirmPassword = "";
      this.password = "";
      this.loginModalVisiable = false;
      this.passwordVisiable = false;
    },

    //添加帐号
    addAccount() {
      let reqArr = [
        ["newAccout", "string", "请输入帐号"],
        ["newPassword", "string", "请输入密码"],
        ["real_name", "string", "请输入真实姓名"]
      ];
      let res = this.$requiredFun(reqArr, this);
      if (res.state) {
        let formData = new FormData();
        formData.append("user_name", this.newAccout);
        formData.append("password", this.newPassword);
        formData.append("real_name", this.real_name);
        this.$http(
          "/wgl_admin/index.php?app=account&act=create_manager",
          "post",
          {},
          {},
          formData,
          success => {
            this.$message.success("新增成功");
            this.loginModalVisiable = false;
            this.getAccountList();
            this.real_name = "";
            this.newAccout = "";
            this.newPassword = "";
          },
          error => {
            this.$message.error(error.state.msg);
          }
        );
      } else {
        this.$message(res.msg);
      }
    },
    changePassword() {
      let reqArr = [
        ["oldPassword", "string", "请输入旧帐号"],
        ["password", "string", "请输入新密码"],
        ["confirmPassword", "string", "请输入确认新密码"]
      ];
      let res = this.$requiredFun(reqArr, this);
      if (res.state) {
        if (this.password !== this.confirmPassword) {
          this.$message.error("密码与确认密码不一致");
          return;
        }
        if (this.password.length < 6) {
          this.$message.error("密码长度必须为6位以上");
          return;
        }
        let formData = new FormData();
        formData.append("id", this.currentAccoutId);
        formData.append("oldPassword", this.oldPassword);
        formData.append("newPassword", this.password);
        formData.append("confirmPass", this.confirmPassword);
        this.$http(
          "/wgl_admin/index.php?app=account&act=manage_pwd",
          "post",
          {},
          {},
          formData,
          success => {
            this.passwordVisiable = false;
            this.$message.success(success.state.msg);
            this.oldPassword = "";
            this.newPassword = "";
            this.confirmPassword = "";
          },
          error => {
            this.$message.error(error.state.msg);
          }
        );
      } else {
        this.$message(res.msg);
      }
    },
    //删除帐号
    delAccount(row) {
      console.log(row);
      this.$confirm("是否确定删除该帐号", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          let formData = new FormData();
          formData.append("id", row.manager_id);
          this.$http(
            "/wgl_admin/index.php?app=account&act=drop",
            "post",
            {},
            {},
            formData,
            success => {
              this.$message.success("删除成功");
              this.getAccountList();
            },
            error => {
              this.$message.error(error.state.msg);
            }
          );
        })
        .catch(() => {});
    },
    //多选选择商品操作
    clickRow(selection) {
      this.goodsArr = selection;
    },
    getAccountList() {
      let formData = new FormData();
      formData.append("page", this.currentPage);
      formData.append("per_page", this.per_page);
      this.$http(
        "/wgl_admin/index.php?app=account&act=index",
        "post",
        {},
        {},
        formData,
        success => {
          console.log(success.data);
          this.accountList = success.data.list;
          this.total_count = success.data.total_count;
        },
        error => {
          this.$message.error(error.state.msg);
        }
      );
    }
  },
  created() {
    this.getAccountList();
    this.userId = sessionStorage.userId;
  },
  mounted() {},

  data() {
    return {
      confirmPassword: "",
      password: "",
      oldPassword: "",
      real_name: "",
      newAccout: "",
      newPassword: "",
      userId : '',
      currentAccoutId: "", //当前用户id
      loginModalVisiable: false, //登录模态框显示隐藏
      passwordVisiable: false, //密码模态框显示隐藏
      accountArr: [],
      currentPage: 1, //当前的页码
      per_page: 10,
      pageSizeArray: PageSizeArray,
      accountList: [],
      total_count: 0 //所有帐号总数
    };
  }
};
</script>
<style lang="scss" scoped>
.account-model {
  min-width: 1466px;
  padding: 30px 68px 30px 50px;
  .btns {
    margin-bottom: 38px;
  }
  .pagination {
    width: 100%;
    text-align: right;
    margin-top: 46px;
  }
}
.modal-container {
  width: 100%;
  height: 100%;
  padding-top: 122px;
  padding-bottom: 95px;
  .modal-form {
    width: 450px;
    height: 135px;
    margin: 0 auto;
    .item {
      height: 32px;
      margin-bottom: 18px;
      .labelName {
        color: #666;
        font-size: 14px;
        height: 32px;
        line-height: 32px;
        position: relative;
        margin-right: 10px;
        text-align: right;
        width: 78px;
      }
      .labelName:before {
        content: "*";
        color: #e65969;
        display: inline-block;
        height: 32px;
        line-height: 32px;
      }
      .inputPassword {
        width: 240px;
        height: 32px;
        padding-left: 15px;
        border: 1px solid #e6e8f4;
        margin-right: 10px;
        font-size: 12px;
      }
      .tips {
        color: #666;
        height: 32px;
        line-height: 32px;
        font-size: 12px;
      }
    }
  }
}
.dialog-footer {
  display: block;
  height: 100%;
  width: 100%;
  padding-top: 18px;
  border-top: 1px solid #e6e8f4;
}
.control {
  .btn {
    color: #6499f5;
    font-size: 14px;
    cursor: pointer;
    position: relative;
  }
  .spacer:after {
    content: "|";
    display: inline;
    color: #b7bdc9;
  }
}
</style>
